<template>
  <div class="index-countdown-container" v-if="isStart >= 0">
    <router-link :to="timeUpHref" class="about about-start" v-if="isStart === 0" tag="div">
      <div class="countdown">
        <p class="time lf">{{time[0]}}</p>
        <p class="txt lf">วัน</p>
        <p class="time lf">{{time[1]}}</p>
        <p class="txt lf">ชั่วโมง</p>
        <p class="time lf">{{time[2]}}</p>
        <p class="txt lf">นาที</p>
        <p class="time lf">{{time[3]}}</p>
        <p class="txt lf no-margin">วินาที</p>
      </div>
    </router-link>
    <router-link :to="timeUpHref" v-else-if="isStart === 1" class="started" tag="div"></router-link>
    <router-link :to="timeUpHref" class="about about-end" v-else-if="isStart === 2" tag="div">
      <div class="countdown">
        <p class="time lf">{{time[0]}}</p>
        <p class="txt lf">วัน</p>
        <p class="time lf">{{time[1]}}</p>
        <p class="txt lf">ชั่วโมง</p>
        <p class="time lf">{{time[2]}}</p>
        <p class="txt lf">นาที</p>
        <p class="time lf">{{time[3]}}</p>
        <p class="txt lf no-margin">วินาที</p>
      </div>
    </router-link>
    <router-link :to="timeUpHref" v-else-if="isStart === 3" class="ended" tag="div"></router-link>
    <!-- 提示弹窗 -->
    <v-dialog v-if="alertShow">
      <div class="alert">
        <p class="txt" v-html="alertText"></p>
        <div class="button-container">
          <div class="button button-cancel" @click="alertShow = false">รับทราบค่ะ</div>
        </div>
      </div>
    </v-dialog>
  </div>
</template>
<script>
import VDialog from '@/components/base/VDialog'
export default {
  components: {
    VDialog
  },
  props: {
    timeUpHref: String
  },
  data () {
    return {
      restTime: null, // 剩余时间
      realStartCountdown: false, // 是否真正开始活动
      alertShow: false, // 提示弹窗开关
      alertText: 'กำลังจัดการให้，โปรดรอสักครู่', // alert提示文字
      isStart: 0, // -1 - 一切未开始,  0 - 活动开始倒计时, 1 - 活动已开始, 2 - 活动结束倒计时, 3 - 活动已结束
      timeDiffList: [] // 时间差列表
    }
  },
  methods: {
    // 初始化时间差
    init () {
      this.$ajax.getActiveTime().then(res => {
        if (res.code === 200) {
          for (let key in res.data) { this.timeDiffList.push(res.data[key] * 1000) }
          this.initCountdown()
        }
      }).catch(err => {
        this.$store.commit('alert', {switch: true, alertText: this.$t('message.errorMessage')})
      })
    },
    // 初始化倒计时状态 & 倒计时触发
    initCountdown () {
      this.isStart = this.countdownTypeMethod()
      if (this.isStart === -1) {
        this.restTime = this.timeDiffList[0]
        this.countdown('noCount')
      } else if (this.isStart === 0) {
        this.restTime = this.timeDiffList[1]
        // // 0-9点间弹窗并将倒计时增加9h
        // if (this.restTime <= 0 && this.restTime > -32400000) {
        //   this.restTime += 32400000
        // } else {}
        this.countdown('startCounting')
      } else if (this.start === 1) {
        this.restTime = this.timeDiffList[2]
        this.countdown('start')
      } else if (this.isStart === 2) {
        this.restTime = this.timeDiffList[3]
        this.countdown('endCounting')
      } else if (this.isStart === 3) {
        this.restTime = this.timeDiffList[4]
        this.countdown('end')
      }
    },
    // 开启倒计时: noCount - -1, startCounting - 0, start - 1, endCounting - 2, end - 3
    countdown (type) {
      this[`interval${type}`] = setInterval(() => {
        this.restTime -= 1000
        if (this.restTime <= 0) {
          // 执行新的倒计时，状态改为下一个，重设restTime
          if (this.isStart === -1) {
            this.isStart = 0
            this.restTime = this.timeDiffList[1]
            this.countdown('startCounting')
          } else if (this.isStart === 0) {
            // 第一次倒计时结束处理
            // if (!this.realStartCountdown) {
            //   this.restTime += 32400000
            //   this.realStartCountdown = true
            //   return
            // } else {}
            this.isStart = 1
            this.restTime = this.timeDiffList[2]
            this.countdown('start')
          } else if (this.isStart === 1) {
            this.isStart = 2
            this.restTime = this.timeDiffList[3]
            this.countdown('endCounting')
          } else if (this.isStart === 2) {
            this.isStart = 3
            this.restTime = this.timeDiffList[4]
            this.countdown('end')
          } else if (this.isStart === 3) {
            this.isStart = -1
            this.restTime = null
          }
          clearInterval(this[`interval${type}`])
        }
      }, 1000)
    },
    // 获取显示状态
    // -1 - 活动倒计时未开始, 0 - 活动开始倒计时, 1 - 活动已开始, 2 - 活动结束倒计时, 3 - 活动已结束
    countdownTypeMethod () {
      // return 0
      // -1 - 活动倒计时未开始, 0 - 活动开始倒计时, 1 - 活动已开始, 2 - 活动结束倒计时, 3 - 活动已结束
      if (this.timeDiffList[0] > 0) {
        return -1
      } else if (this.timeDiffList[0] <= 0 && this.timeDiffList[1] > 0) {
        return 0
      } else if (this.timeDiffList[1] <= 0 && this.timeDiffList[2] > 0) {
        return 1
      } else if (this.timeDiffList[2] <= 0 && this.timeDiffList[3] > 0) {
        return 2
      } else if (this.timeDiffList[3] <= 0 && this.timeDiffList[4] > 0) {
        return 3
      } else {
        return -1
      }
    },
    // 开启提示弹窗
    openAlert (txt) {
      this.alertShow = true
      this.alertText = txt
    }
  },
  computed: {
    // 倒计时生成时分秒
    time () {
      if (this.restTime >= 0) {
        let time = new Date(this.restTime)
        let day = time.getTime() / 86400000
        let dayNum = day > 99 ? 99 : Math.floor(day)
        dayNum = dayNum < 10 ? `0${dayNum}` : dayNum
        let hour = time.getUTCHours()
        let hourNum = hour < 10 ? `0${hour}` : hour
        let minute = time.getUTCMinutes()
        let minuteNum = minute < 10 ? `0${minute}` : minute
        let second = time.getUTCSeconds()
        let secondNum = second < 10 ? `0${second}` : second
        return [dayNum, hourNum, minuteNum, secondNum]
      } else {
        return ['00', '00', '00', '00']
      }
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped>
/* normal */
.button {
  width: 180px;
  height: 46px;
  background-image: linear-gradient(-90deg, #FF8794 0%, #FF6263 100%);
  border-radius: 4px;
  line-height: 46px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.button:hover {
  background-image: linear-gradient(-90deg, #FF8794 0%, #FF6263 100%);
  box-shadow: 0 3px 12px 0 #FFBABE;
}
.button:active {
  background-image: linear-gradient(-108deg, #FE595A 3%, #EC4F50 100%);
  box-shadow: 0 3px 12px 0 
}
.button-disabled {
  background-image: linear-gradient(-90deg, #FFC3CA 0%, #FFB1B2 100%);
}
.button-disabled:hover {
  background-image: linear-gradient(-90deg, #FFC3CA 0%, #FFB1B2 100%);
  box-shadow: none;
}
.button-disabled:active {
  background-image: linear-gradient(-90deg, #FFC3CA 0%, #FFB1B2 100%);
  box-shadow: none;
}
/* main */
.index-countdown-container {
  width: 100%;
  padding-top: 29px;
}
.about {
  width: 951px;
  height: 191px;
  margin: 0 auto;
  background-size: 951px 191px;
  cursor: pointer;
}
.about-start {
  background: url(../../assets/images/index/enter_count_down_1.png);
}
.about-end {
  background: url(../../assets/images/index/enter_count_down_3.png);
}
.countdown {
  padding: 103px 291px 0;
  overflow: hidden;
}
.countdown .lf {
  float: left;
}
.countdown .time {
  width: 38px;
  height: 40px;
  margin-right: 8px;
  background: #FFFFFF;
  border-radius: 4.14px;
  font-size: 16px;
  text-align: center;
  color: #333333;
  line-height: 40px;
}
.countdown .txt {
  width: 40px;
  height: 40px;
  margin-right: 8px;
  font-family: Thonburi;
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 40px;
}
.countdown .no-margin {
  margin: 0;
}
.started {
  width: 951px;
  height: 191px;
  margin: 0 auto;
  background: url(../../assets/images/index/enter_count_down_2.png);
  background-size: 951px 191px;
  cursor: pointer;
}
.ended {
  width: 951px;
  height: 191px;
  margin: 0 auto;
  background: url(../../assets/images/index/enter_count_down_4.png);
  background-size: 951px 191px;
  cursor: pointer;
}
/* alert dialog */
.alert {
  width: 460px;
  height: 241px;
  background: #FFFFFF;
  border-radius: 6px;
}
.alert .txt {
  padding: 56px 0;
  font-family: Thonburi-Bold;
  font-size: 18px;
  color: #4F4F4F;
  letter-spacing: 0;
  text-align: center;
  line-height: 33px; 
}
.alert .button {
  margin: 0 auto;
}
</style>
